﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, JSON, Import Layout" />
    <meta name="description" content="Your customized layout, using jqxDocking, can be saved in cookies, file or into the database as a JSON string and restored later. In this demo 
    you can see how you can restore jqxDocking's layout from a JSON string." />
    <title id='Description'>In this demo, the jqxDocking layout is imported from JSON string by using the importLayout method.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                    'JavaScript Certification - Welcome to our network',
                    'Business Challenges via Web take a part',
                    'jQWidgets better web, less time. Take a tour',
                    'Facebook - you have 7 new notifications',
                    'Twitter - John Doe is following you. Look at his profile',
                    'New videos, take a look at YouTube.com'
		        ];
            var theme = getTheme();
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 550, mode: 'default' });
            $('#docking').jqxDocking('importLayout', '{"panel0": {"window0":{"collapsed":false}},"panel1": {"window1":{"collapsed":false},"window5":{"collapsed":false}},"floating":{"window2":{"x":"200px","y":"270","width":"350px","height":"auto","collapsed":false}},"orientation": "horizontal"}');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="docking" style="float: left;">
            <div style="overflow: hidden;">
                <div id="window0" style="height: 200px">
                    <div>
                        CISC</div>
                    <div>
                        Before the RISC philosophy became prominent, many computer architects tried to bridge
                        the so called semantic gap, i.e. to design instruction sets that directly supported
                        high-level programming constructs such as procedure calls, loop control, and complex...</div>
                </div>
                <div id="window1" style="height: 180px">
                    <div>
                        Database management system</div>
                    <div>
                        A database management system (DBMS) is a software package with computer programs
                        that control the creation, maintenance, and the use of a database. It allows organizations
                        to conveniently develop databases...</div>
                </div>
            </div>
            <div style="overflow: hidden;">
                <div id="window2" style="height: 180px">
                    <div>
                        RISC</div>
                    <div>
                        Some aspects attributed to the first RISC-labeled designs around 1975 include the
                        observations that the memory-restricted compilers of the time were often unable
                        to take advantage...</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
